<template>
  <div class="login">
    <img
      class="bg"
      src="https://cimg.axureshop.com/c3/14/fa/c314fa2c9b804cf58f68a438c7efbcea/images/%E8%BD%AF%E4%BB%B6%E7%99%BB%E5%BD%95/u91.png"
      alt=""
    />
    <img
      class="dot"
      src="https://cimg.axureshop.com/c3/14/fa/c314fa2c9b804cf58f68a438c7efbcea/images/%E8%BD%AF%E4%BB%B6%E7%99%BB%E5%BD%95/u1.png"
      alt=""
    />
    <div class="rel">
      <img
        class="border"
        src="https://cimg.axureshop.com/c3/14/fa/c314fa2c9b804cf58f68a438c7efbcea/images/%E8%BD%AF%E4%BB%B6%E7%99%BB%E5%BD%95/u2.svg"
        alt=""
      />
      <div class="form">
        <p style="margin: 20px 0">消防应急管理系统</p>
        <div class="inp">
          <el-input placeholder="请输入账号" v-model="user">
            <template slot="prepend">账号</template>
          </el-input>
        </div>
        <div class="inp">
          <el-input placeholder="请输入密码" v-model="pwd">
            <template slot="prepend">密码</template>
          </el-input>
        </div>
        <div class="check">
          <el-input style="width: 190px" placeholder="验证码" v-model="check">
            <template slot="prepend">验证</template>
          </el-input>
          <img @click="refresh" :src="img" alt="" srcset="" />
        </div>
        <button @click="login"><span>登录</span><i></i></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: "",
      check: "",
      reCheck: "",
      user: "",
      pwd: "",
      radio: "1",
    };
  },
  methods: {
    refresh() {
      this.$axios({
        url: "/captcha.jpg",
      }).then((res) => {
        this.img =
          "http://120.55.49.64:8080/FireEmergency/captcha.jpg?" + Math.random();
        this.$axios({
          url: "/getCaptcha",
        }).then((res) => {
          console.log("验证码", res.data.data);
          this.reCheck = res.data.data;
        });
      });
    },
    login() {
      if (this.check.toUpperCase() == this.reCheck) {
        this.$axios({
          url: "/login",
          method: "post",
          data: `userName=${this.user}&pwd=${this.pwd}`,
        }).then((res) => {
          if (res.data.code == 200) {
            let token = res.data.data.token;
            sessionStorage.setItem("token", token);
            sessionStorage.setItem("power", res.data.data.role);
            sessionStorage.setItem("user", JSON.stringify(res.data.data));
            this.$message.success("登录成功");

            if (res.data.data.role == "访客") {
              //访客身份
              var list = [
                {
                  title: "综合态势",
                  name: "home",
                  href: "/comprehensive",
                  view: "comprehensive/ComprehensiveSituational",
                  children: [
                    {
                      href: "/comprehensive",
                      // name: "comprehensivechild",
                      // view: "comprehensive/ComprehensiveSituational",
                    },
                  ],
                },
                {
                  title: "设备管理",
                  name: "equipment",
                  href: "/equipment",
                  view: "equipment/EquipmentManagement",
                  children: [
                    {
                      href: "/equipment/fireDetection",
                      name: "fireDetection",
                      view: "equipment/fireDetection",
                    },
                    {
                      href: "/equipment/fireWater",
                      name: "fireWater",
                      view: "equipment/fireWater",
                    },
                    {
                      href: "/equipment/outdoorFirefighting",
                      name: "outdoorFirefighting",
                      view: "equipment/outdoorFirefighting",
                    },
                    {
                      href: "/equipment/safeElectricity",
                      name: "safeElectricity",
                      view: "equipment/safeElectricity",
                    },
                    {
                      href: "/equipment/videoSurveillance",
                      name: "videoSurveillance",
                      view: "equipment/videoSurveillance",
                    },
                  ],
                },
                {
                  title: "告警管理",
                  name: "alarm",
                  href: "/alarm",
                  view: "alarm/AlarmIndex",
                  children: [
                    {
                      href: "/alarm/AlarmAll",
                      name: "AlarmAll",
                      view: "alarm/AlarmAll",
                    },
                    {
                      href: "/alarm/AlarmManagement",
                      name: "AlarmManagement",
                      view: "alarm/AlarmManagement",
                    },
                    {
                      href: "/alarm/AlarmDetails",
                      name: "AlarmDetails",
                      view: "alarm/AlarmDetails",
                    },
                    {
                      href: "/alarm/ProductionHouse",
                      name: "ProductionHouse",
                      view: "alarm/ProductionHouse",
                    },
                    {
                      href: "/alarm/WarehouseFloor",
                      name: "WarehouseFloor",
                      view: "alarm/WarehouseFloor",
                    },
                    {
                      href: "/alarm/ActivityCenter",
                      name: "ActivityCenter",
                      view: "alarm/ActivityCenter",
                    },
                  ],
                },
                {
                  title: "巡检管理",
                  name: "inspection",
                  href: "/inspection",
                  view: "inspection/InspectionManagement",
                  //暂定
                  children: [
                    {
                      href: "/inspection/patrolScheme",
                      name: "patrolScheme",
                      view: "inspection/patrolScheme",
                    },
                    {
                      href: "/inspection/InspectionTasks",
                      name: "InspectionTasks",
                      view: "inspection/InspectionTasks",
                    },
                    {
                      href: "/inspection/patrolPoints",
                      name: "patrolPoints",
                      view: "inspection/patrolPoints",
                      children: [
                        {
                          href: "/inspection/patrolPoints/all",
                          view: "components/inspection/all",
                        },
                        {
                          href: "/inspection/patrolPoints/integratedOffice",
                          view: "components/inspection/integratedOffice",
                        },
                        {
                          href: "/inspection/patrolPoints/productionLine",
                          view: "components/inspection/productionLine",
                        },
                        {
                          href: "/inspection/patrolPoints/storage",
                          view: "components/inspection/storage",
                        },
                        {
                          href: "/inspection/patrolPoints/activityCenter",
                          view: "components/inspection/activityCenter",
                        },
                      ],
                    },
                    {
                      href: "/inspection/personnelLocation",
                      name: "personnelLocation",
                      view: "inspection/personnelLocation",
                    },
                  ],
                },
                {
                  title: "故障管理",
                  name: "fault",
                  href: "/fault",
                  view: "fault/FaultManagement",
                  children: [
                    {
                      href: "/fault/allequipment",
                      name: "allequipment",
                      view: "fault/AllEquipment",
                    },
                    {
                      href: "/fault/firequipment",
                      name: "firequipment",
                      view: "fault/FireEuipment",
                    },
                    {
                      href: "/fault/water",
                      name: "water",
                      view: "fault/WaterEuipment",
                    },
                    {
                      href: "/fault/door",
                      name: "door",
                      view: "fault/DoorEuipment",
                    },
                    {
                      href: "/fault/safe",
                      name: "safe",
                      view: "fault/SafeEuipment",
                    },
                    {
                      href: "/fault/video",
                      name: "video",
                      view: "fault/VideoEuipment",
                    },
                  ],
                },
              ];
              sessionStorage.setItem("list", JSON.stringify(list));
              // this.$store.state.list = list;
            } else if (res.data.data.role == "普通角色") {
              //管理员
              var list = [
                {
                  title: "综合态势",
                  name: "home",
                  href: "/comprehensive",
                  view: "comprehensive/ComprehensiveSituational",
                  children: [
                    {
                      href: "/comprehensive",
                    },
                  ],
                },
                {
                  title: "设备管理",
                  name: "equipment",
                  href: "/equipment",
                  view: "equipment/EquipmentManagement",
                  children: [
                    {
                      href: "/equipment/fireDetection",
                      view: "equipment/fireDetection",
                    },
                    {
                      href: "/equipment/fireWater",
                      view: "equipment/fireWater",
                    },
                    {
                      href: "/equipment/outdoorFirefighting",
                      view: "equipment/outdoorFirefighting",
                    },
                    {
                      href: "/equipment/safeElectricity",
                      view: "equipment/safeElectricity",
                    },
                    {
                      href: "/equipment/videoSurveillance",
                      view: "equipment/videoSurveillance",
                    },
                  ],
                },
                {
                  title: "告警管理",
                  name: "alarm",
                  href: "/alarm",
                  view: "alarm/AlarmIndex",
                  children: [
                    {
                      href: "/alarm/AlarmAll",
                      view: "alarm/AlarmAll",
                    },
                    {
                      href: "/alarm/AlarmManagement",
                      view: "alarm/AlarmManagement",
                    },
                    {
                      href: "/alarm/AlarmDetails",
                      view: "alarm/AlarmDetails",
                    },
                    {
                      href: "/alarm/ProductionHouse",
                      view: "alarm/ProductionHouse",
                    },
                    {
                      href: "/alarm/WarehouseFloor",
                      view: "alarm/WarehouseFloor",
                    },
                    {
                      href: "/alarm/ActivityCenter",
                      view: "alarm/ActivityCenter",
                    },
                  ],
                },
                {
                  title: "巡检管理",
                  name: "inspection",
                  href: "/inspection",
                  view: "inspection/InspectionManagement",
                  //暂定
                  children: [
                    {
                      href: "/inspection/patrolScheme",
                      view: "inspection/patrolScheme",
                    },
                    {
                      href: "/inspection/InspectionTasks",
                      view: "inspection/InspectionTasks",
                    },
                    {
                      href: "/inspection/patrolPoints",
                      view: "inspection/patrolPoints",
                    },
                    {
                      href: "/inspection/personnelLocation",
                      view: "inspection/personnelLocation",
                    },
                  ],
                },
                {
                  title: "故障管理",
                  name: "fault",
                  href: "/fault",
                  view: "fault/FaultManagement",
                  children: [
                    {
                      href: "/fault/allequipment",
                      view: "fault/AllEquipment",
                    },
                    {
                      href: "/fault/firequipment",
                      view: "fault/FireEuipment",
                    },
                    {
                      href: "/fault/water",
                      view: "fault/WaterEuipment",
                    },
                    {
                      href: "/fault/door",
                      view: "fault/DoorEuipment",
                    },
                    {
                      href: "/fault/safe",
                      view: "fault/SafeEuipment",
                    },
                    {
                      href: "/fault/video",
                      view: "fault/VideoEuipment",
                    },
                  ],
                },
                {
                  title: "值班室管理",
                  name: "duty",
                  href: "/duty",
                  view: "duty/DutyManagement",
                  children: [
                    {
                      href: "/duty/DutyRoomMonitoring",
                      view: "duty/DutyRoomMonitoring",
                    },
                    {
                      href: "/duty/ShiftManagement",
                      view: "duty/ShiftManagement",
                    },
                    {
                      href: "/duty/DutyRecords",
                      view: "duty/DutyRecords",
                    },
                  ],
                },
                {
                  title: "隐患管理",
                  name: "Risk",
                  href: "/Risk",
                  view: "risk/RiskIndex",
                  children: [
                    {
                      href: "/risk/RiskList",
                      view: "risk/RiskList",
                    },
                    {
                      href: "/risk/RiskManagement",
                      view: "risk/RiskManagement",
                    },
                    {
                      href: "/risk/RiskDetail",
                      view: "risk/RiskDetail",
                    },
                    {
                      href: "/risk/ComplexOfficeBuilding",
                      view: "risk/ComplexOfficeBuilding",
                    },
                    {
                      href: "/risk/ProductionHouse",
                      view: "risk/ProductionHouse",
                    },
                    {
                      href: "/risk/WarehouseFloor",
                      view: "risk/WarehouseFloor",
                    },
                    {
                      href: "/risk/ActivityCenter",
                      view: "risk/ActivityCenter",
                    },
                  ],
                },
              ];
              sessionStorage.setItem("list", JSON.stringify(list));
              // this.$store.state.list = list;
            } else {
              //超级管理员
              var list = [
                {
                  title: "综合态势",
                  name: "home",
                  href: "/comprehensive",
                  view: "comprehensive/ComprehensiveSituational",
                  children: [
                    {
                      href: "/comprehensive",
                    },
                  ],
                },
                {
                  title: "设备管理",
                  name: "equipment",
                  href: "/equipment",
                  view: "equipment/EquipmentManagement",
                  children: [
                    {
                      href: "/equipment/fireDetection",
                      view: "equipment/fireDetection",
                    },
                    {
                      href: "/equipment/fireWater",
                      view: "equipment/fireWater",
                    },
                    {
                      href: "/equipment/outdoorFirefighting",
                      view: "equipment/outdoorFirefighting",
                    },
                    {
                      href: "/equipment/safeElectricity",
                      view: "equipment/safeElectricity",
                    },
                    {
                      href: "/equipment/videoSurveillance",
                      view: "equipment/videoSurveillance",
                    },
                  ],
                },
                {
                  title: "告警管理",
                  name: "alarm",
                  href: "/alarm",
                  view: "alarm/AlarmIndex",
                  children: [
                    {
                      href: "/alarm/AlarmAll",
                      view: "alarm/AlarmAll",
                    },
                    {
                      href: "/alarm/AlarmManagement",
                      view: "alarm/AlarmManagement",
                    },
                    {
                      href: "/alarm/AlarmDetails",
                      view: "alarm/AlarmDetails",
                    },
                    {
                      href: "/alarm/ProductionHouse",
                      view: "alarm/ProductionHouse",
                    },
                    {
                      href: "/alarm/WarehouseFloor",
                      view: "alarm/WarehouseFloor",
                    },
                    {
                      href: "/alarm/ActivityCenter",
                      view: "alarm/ActivityCenter",
                    },
                  ],
                },
                {
                  title: "巡检管理",
                  name: "inspection",
                  href: "/inspection",
                  view: "inspection/InspectionManagement",
                  //暂定
                  children: [
                    {
                      href: "/inspection/patrolScheme",
                      name: "patrolScheme",
                      view: "inspection/patrolScheme",
                    },
                    {
                      href: "/inspection/InspectionTasks",
                      name: "InspectionTasks",
                      view: "inspection/InspectionTasks",
                    },
                    {
                      href: "/inspection/patrolPoints",
                      name: "patrolPoints",
                      view: "inspection/patrolPoints",
                      children: [
                        {
                          href: "/inspection/patrolPoints/all",
                          view: "components/inspection/all",
                        },
                        {
                          href: "/inspection/patrolPoints/integratedOffice",
                          view: "components/inspection/integratedOffice",
                        },
                        {
                          href: "/inspection/patrolPoints/productionLine",
                          view: "components/inspection/productionLine",
                        },
                        {
                          href: "/inspection/patrolPoints/storage",
                          view: "components/inspection/storage",
                        },
                        {
                          href: "/inspection/patrolPoints/activityCenter",
                          view: "components/inspection/activityCenter",
                        },
                      ],
                    },
                    {
                      href: "/inspection/personnelLocation",
                      name: "personnelLocation",
                      view: "inspection/personnelLocation",
                    },
                  ],
                },
                {
                  title: "故障管理",
                  name: "fault",
                  href: "/fault",
                  view: "fault/FaultManagement",
                  children: [
                    {
                      href: "/fault/allequipment",
                      view: "fault/AllEquipment",
                    },
                    {
                      href: "/fault/firequipment",
                      view: "fault/FireEuipment",
                    },
                    {
                      href: "/fault/water",
                      view: "fault/WaterEuipment",
                    },
                    {
                      href: "/fault/door",
                      view: "fault/DoorEuipment",
                    },
                    {
                      href: "/fault/safe",
                      view: "fault/SafeEuipment",
                    },
                    {
                      href: "/fault/video",
                      view: "fault/VideoEuipment",
                    },
                  ],
                },
                {
                  title: "值班室管理",
                  name: "duty",
                  href: "/duty",
                  view: "duty/DutyManagement",
                  children: [
                    {
                      href: "/duty/DutyRoomMonitoring",
                      view: "duty/DutyRoomMonitoring",
                    },
                    {
                      href: "/duty/ShiftManagement",
                      view: "duty/ShiftManagement",
                    },
                    {
                      href: "/duty/DutyRecords",
                      view: "duty/DutyRecords",
                    },
                  ],
                },
                {
                  title: "隐患管理",
                  name: "Risk",
                  href: "/Risk",
                  view: "risk/RiskIndex",
                  children: [
                    {
                      href: "/risk/RiskList",
                      view: "risk/RiskList",
                    },
                    {
                      href: "/risk/RiskManagement",
                      view: "risk/RiskManagement",
                    },
                    {
                      href: "/risk/RiskDetail",
                      view: "risk/RiskDetail",
                    },
                    {
                      href: "/risk/ComplexOfficeBuilding",
                      view: "risk/ComplexOfficeBuilding",
                    },
                    {
                      href: "/risk/ProductionHouse",
                      view: "risk/ProductionHouse",
                    },
                    {
                      href: "/risk/WarehouseFloor",
                      view: "risk/WarehouseFloor",
                    },
                    {
                      href: "/risk/ActivityCenter",
                      view: "risk/ActivityCenter",
                    },
                  ],
                },
                {
                  title: "系统设置",
                  name: "system",
                  href: "/system",
                  view: "system/SystemSettings",
                  children: [
                    {
                      href: "/system/department",
                      view: "system/Department",
                    },
                    {
                      href: "/system/user",
                      view: "system/User",
                    },
                    {
                      href: "/system/role",
                      view: "system/Role",
                    },
                  ],
                },
              ];
              sessionStorage.setItem("list", JSON.stringify(list));
              // this.$store.state.list = list;
            }

            list.forEach((v) => {
              // console.log(this);
              if (v.href == "/comprehensive") {
                this.$router.addRoute("home", {
                  path: v.href,
                  name: v.name,
                  component: () => import(`@/views/${v.view}.vue`),
                });
              } else {
                this.$router.addRoute("home", {
                  path: v.href,
                  name: v.name,
                  component: () => import(`@/views/${v.view}.vue`),
                  redirect: v.children[0].href,
                });
                v.children.forEach((item) => {
                  this.$router.addRoute(v.name, {
                    path: item.href,
                    name: item.name,
                    component: () => import(`@/views/${item.view}.vue`),
                  });
                });
                console.log(this.$router.getRoutes(), "看这里111");
              }
            });

            this.$router.replace("/").catch((err) => {
              this.$router.replace("/");
              this.$router.go();
            });
          } else {
            this.$message.error("账号密码错误");
          }
        });
      } else {
        this.$message.error("验证码错误");
        this.refresh();
      }
    },
  },
  mounted() {
    this.refresh();
    // this.$axios({
    //   url: "/captcha.jpg",
    // }).then((res) => {
    // });
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  // background: #091121;
  background-image: url("https://cimg.axureshop.com/c3/14/fa/c314fa2c9b804cf58f68a438c7efbcea/images/软件登录/u0.png");
  .dot {
    width: 600px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .bg {
    width: 600px;
    position: absolute;
    left: 200px;
    // top: 100px;
  }
  .rel {
    position: relative;
    .border {
      box-shadow: 0 0 100px 6px #06e5e5;
      border: none;
      position: absolute;
      width: 500px;
      height: 420px;
      left: -180px;
      top: -200px;
    }
    .form {
      text-align: center;
      position: absolute;
      width: 500px;
      color: #fff;
      z-index: 10;
      left: -180px;
      top: -170px;
      p {
        padding-left: 50px;
        text-align: left;
        font-size: 23px;
      }
      .inp,
      .check {
        .el-input {
          border-radius: 4px;
          width: 400px;
          margin: 10px 0;
          border: 2px solid #06e5e5;
          background: #ffffff00;
        }
      }
      .check {
        img {
          width: 200px;
          height: 60px;
          vertical-align: middle;
          margin-left: 10px;
        }
      }
      // .el-button {
      //   margin-top: 30px;
      //   line-height: 20px;
      //   width: 80%;
      //   color: #fff;
      //   background: #048f95;
      //   border: none;
      //   &:hover {
      //     background: #05a4aa;
      //     font-size: 1.01rem;
      //   }
      // }
      .radio {
        width: 100%;
        text-align: center;
        margin: 10px 0;
      }
    }
  }
  /* From uiverse.io by @adamgiebl */
  /* From uiverse.io by @mrhyddenn */
  button {
    cursor: pointer;
    line-height: 24px;
    width: 80%;
    margin-top: 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 30px;
    transition: 0.5s;
    position: relative;
    font-size: 17px;
    background: #dad6d6;
    border: none;
    color: #fff;
  }

  button:hover {
    letter-spacing: 0.25em;
    background: #06e5e5;
    color: #1eeff7;
    box-shadow: 0 0 45px rgb(248, 231, 234);
  }

  button::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: #222222;
  }

  button span {
    position: relative;
    z-index: 1;
  }

  button i {
    position: absolute;
    inset: 0;
    display: block;
  }

  button i::before {
    content: "";
    position: absolute;
    border: 2px solid #ff1867;
    width: 7px;
    height: 4px;
    top: -3.5px;
    left: 80%;
    background: #222222;
    transform: translateX(-50%);
    transition: 0.5s;
  }

  button:hover i::before {
    width: 20px;
    left: 20%;
  }

  button i::after {
    content: "";
    position: absolute;
    border: 2px solid #ff1867;
    width: 7px;
    height: 4px;
    bottom: -3.5px;
    left: 20%;
    background: #222222;
    transform: translateX(-50%);
    transition: 0.5s;
  }

  button:hover i::after {
    width: 20px;
    left: 80%;
  }
}
</style>